<route lang="json5" type="page">
{
  layout: "tabbar",
  style: {
    navigationStyle: "custom",
    navigationBarTitleText: "我的",
  },
}
</route>

<template>
  <wd-toast />
  <!-- v-if="userInfo.userId" -->
  <view class="overflow-hidden">
    <!-- 头部信息 -->
    <Information />
    <!-- 我的作品 -->
    <MyWorkbenches
      v-show="!showWorkList"
      @show-list="toggleWorkList(true)"
      class="overflow-hidden"
    />
    <!-- 工作台 -->
    <WorkList
      v-show="showWorkList"
      :list="list"
      @item-click="handleItemClick"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useToast } from "wot-design-uni";
import Information from "@/components/top-information/top-information.vue";
import MyWorkbenches from "./components/my-workbenches.vue";
import WorkList from "./components/work-list.vue";
import { tabbarStore } from "@/components/fg-tabbar/tabbar";
const toast = useToast();
const showWorkList = ref(false);

// 切换显示状态
const toggleWorkList = (show: boolean) => {
  showWorkList.value = show;
};
const BASEURL = "/static/images";
const list = ref([
  {
    type: "switch",
    name: "活动&商单管理",
    index: 0,
    url: BASEURL + "/work-hdgl.png",
    link: "/pages/bussines/index",
  },
  {
    type: "switch",
    index: 1,
    name: "资讯管理",
    url: BASEURL + "/work-zxgl.png",
    link: "/pages/news/index",
  },
  {
    type: "navigate",
    name: "成员管理",
    url: BASEURL + "/work-cygl.png",
    link: "/pages-sub/fans-page/index",
  },
  {
    type: "component",
    name: "个人作品管理",
    url: BASEURL + "/work-grzp.png",
    link: "/pages/my/index",
  },
]);
const handleItemClick = (item) => {
  if (item.type === "component") {
    toggleWorkList(false);
  }
  if (item.type === "navigate") {
    uni.navigateTo({ url: item.link }); // 其他项正常跳转
  }
  if (item.type === "switch") {
    uni.switchTab({
      url: item.link,
      success: () => {
        console.log("item.index", item.index);
        tabbarStore.setCurIdx(item.index);
      },
    });
  }
};
</script>

<style lang="scss" scoped>
.my-container {
  position: relative;
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 30rpx;
  background: linear-gradient(
    180deg,
    rgba(200, 255, 122, 1) 0,
    rgba(200, 255, 122, 1) 80rpx,
    rgba(205, 246, 148, 0) 462rpx
  );
}
.my-issue {
  padding-top: 10rpx;
  .my-issue-btn {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
  }
  .my-issue-item {
    display: block;
    margin-top: 20rpx;
  }
  .my-issue-icon {
    margin-right: 10rpx;
    font-size: 28rpx;
  }
  .issue-img {
    width: 80rpx;
    height: 80rpx;
  }
}
</style>
